<!--
 * @Description  : 浏览记录
 * @Author       : zhao
 * @Date         : 2022-07-22 11:00:22
 * @LastEditors  : zhao
 * @LastEditTime : 2023-02-02 13:56:34
-->

<template>
    <div class="BrowseRecord">
        <div class="block">
            <ztitle :name="'浏览记录'" />
            <!-- <el-timeline>
                <el-timeline-item :timestamp="i.date" placement="top" v-for="(i, index) in BrowseRecordData"
                    :key="index">
                    <el-card shadow="never" v-for="(s, sindex) in i.data" :key="sindex">
                        <h4><span>题名：</span>{{ s.title }}</h4>
                        <p><span>档案号：</span>{{ s.sn }}</p>
                        <p>{{ s.searchDate }}</p>
                        <p>{{ s.searchDate }}</p>
                    </el-card>
                </el-timeline-item>

            </el-timeline>
            <pagination /> -->
            <ztable :tableHeader="tableHeader" :searchType="searchType" />
        </div>
    </div>
</template>

<script>
import ztitle from "@/components/title"
import ztable from "@/components/zTable/index.vue"
export default {
    name: "",
    data() {
        return {
            BrowseRecordData: [],
            loading: false,
            total: 0,
            tableHeader: [
                { prop: "title", label: "题名", width: "" },
                { prop: "sn", label: "档案号", width: "" },
                { prop: "searchDate", label: "浏览日期", width: "" },
                {
                    label: "操作",
                    width: "130",
                    type: "button",
                    options: [
                        { name: "详情" },
                        // { name: '打印' }
                    ],
                },
            ],
            searchType: [
                {
                    type: "button",
                    options: [
                        { name: "清空浏览记录", type: "warning", plain: true },
                        { name: "删除", type: "danger", plain: true },
                    ],
                },
            ],
        }
    },

    components: { ztitle, ztable },

    computed: {
        noMore() {
            return this.BrowseRecordData.length >= this.total
        },
        disabled() {
            return this.loading || this.noMore
        },
    },

    mounted() {
        this.$store.state.table.searchData.pageSize = 10
        this.$store.state.table.searchData.pageIndex = 1
        this.getData()
        this.$store.state.map.mapList = []
    },

    methods: {
        async getData() {
            let params = {
                pageSize: 10,
                pageIndex: 1,
            }
            const { data, count } = await this.$store.dispatch("searchRecord/getSearchRecord", params)

            this.$store.state.table.searchData = params
            this.$store.state.table.url = "searchRecord/getSearchRecord"
            this.$store.state.table.PaginationData.total = count
            this.$store.state.table.tableData = data || []
        },

        async load() {
            // console.log("🚀 ~ file: drawer.vue ~ line 101 ~ load ~ load", load)
            this.loading = true
            this.pageSize = this.pageSize + 3
            let parameter = {
                pageSize: this.pageSize,
                pageIndex: 1,
            }
            const { data, count } = await this.$store.dispatch("searchRecord/getSearchRecord", params)

            this.BrowseRecordData = this.initData(data)
            const chaCount = data.filter((itemF) => !this.BrowseRecordData.some((ele) => ele.id === itemF.id))
            this.BrowseRecordData.push(...chaCount)
            this.loading = false
        },
        initData(data) {
            let preindex = 0

            return data.reduce((pre, item, index) => {
                let s = {
                    date: item.searchDate,
                    data: [],
                }
                let c = {
                    id: item.id,
                    sn: item.sn,
                    title: item.title,
                    userId: item.userId,
                    searchDate: item.searchDate,
                }
                if (pre.length == 0) {
                    pre.push(s)
                    pre[preindex].data.push(c)
                    return pre
                }
                if (pre.some((e) => e.date.split("T")[0] == item.searchDate.split("T")[0])) {
                    pre[preindex].data.push(c)
                } else {
                    pre.push(s)
                    preindex++
                    pre[preindex].data.push(c)
                }
                return pre
            }, [])
        },
    },
}
</script>
<style lang='scss' scoped>
.BrowseRecord {
    padding: var(--main-padding);

    .block {
        padding: 20px;
        background: white;
        min-height: $height_full;
    }

    .el-timeline {
        border: 1px solid #eee;
        padding: 20px;
    }
}
</style>